﻿@{
    ViewBag.Title = "HubChat";
}
<style>
    * { font-size: 12px; color: #999; }
</style>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.signalR-1.1.2.min.js"></script>
<!--  If this is an MVC project then use the following -->
<script src="~/signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        // Proxy created on the fly          
        var chat = $.connection.chat;
        // Declare a function on the chat hub so the server can invoke it          
        chat.client.addMessage = function (message) {
            $('#messages').append('<li style="border-bottom:1px solid #333;padding:5px;">' + message + '</li>');
        };
        // Start the connection
        $.connection.hub.start().done(function () {
            $("#broadcast").click(function () {
                // Call the chat method on the server
                chat.server.send("<b>@(ViewBag.ClientName)说话了：</b>"
                    + $('#msg').val()
                    + "[<i>@DateTime.Now</i>]");
            });
        });

        var personChat = $.connection.ChatPerson;
        personChat.client.addMessage = function (message) {
            $('#messagesAll').append('<li style="border-bottom:1px solid #333;padding:5px;">' + message + '</li>');
        };
        $.connection.hub.start().done(function () {
            $("#PrivateCast").click(function () {
                // Call the chat method on the server
                personChat.server.send($("#ToSub").val(), "<b>@(ViewBag.ClientName)说话了：</b>"
                    + $('#PrivateMsg').val()
                    + "[<i>@DateTime.Now</i>]");
            });
        });
    });
</script>

<fieldset>
    <legend>对所有人</legend>
    <input type="text" id="msg" />
    <input type="button" id="broadcast" value="broadcast" />

    <ul id="messages">
    </ul>
</fieldset>

<fieldset>
    <legend>对指定人</legend>
    <input type="text" id="PrivateMsg" />
    <input type="text" id="ToSub" />
    <input type="button" id="PrivateCast" value="PrivateCast" />

    <ul id="messagesAll">
    </ul>
</fieldset>
